<template>
  <MenuLayout>
    <template #content>
      <div>
        <p class="fwbold fs-md mg20">· 服务券兑付审核</p>
        <div class="ml20">
          <el-form :model="filterData" label-suffix=":" size="small">
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label-width="100px" label="服务商名称">
                  <el-input v-model="filterData.name" clearable placeholder="请输入服务商名称关键字"/>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label-width="100px" label="服务产品名称">
                  <el-input v-model="filterData.productname" clearable placeholder="请输入服务产品名称关键字"/>
                </el-form-item>
              </el-col>
              <el-col :span="4" class="tl ml20">
                <el-form-item>
                  <el-button size="medium" type="danger">查询</el-button>
                  <el-button size="medium" type="danger" class="ml20">导出</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
          <div class="card">
            <div class="menu-box">
              <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect">
                <el-menu-item index="1">全部</el-menu-item>
                <el-menu-item index="2">待审核</el-menu-item>
                <el-menu-item index="3">审核通过</el-menu-item>
                <el-menu-item index="4">退回修改</el-menu-item>
                <el-menu-item index="5">审核不通过</el-menu-item>
              </el-menu>
            </div>
            <el-table :data="tableData" style="width: 100%" :header-cell-style="{background:'rgb(252, 241, 231)',color:'#606266'}">
              <el-table-column label="订单编号" prop="no"></el-table-column>
              <el-table-column label="服务产品名称" prop="name"></el-table-column>
              <el-table-column label="服务企业" prop="department"></el-table-column>
              <el-table-column label="服务完成时间" prop="date"></el-table-column>
              <el-table-column label="合同金额(元)" prop="price">
                <template slot-scope="{ row }">
                  {{ row.orderType === 2 ? $priceToThousands(row.totalPrice) :  $priceToThousands(row.price) }}
                </template>
              </el-table-column>
              <el-table-column label="拟兑付金额(元)" prop="bidPrice"></el-table-column>
              <el-table-column label="服务状态">
                <template slot-scope="scope">
                  <p v-if="scope.row.serviceState == 0" class="color-backcolor">未完成</p>
                  <p v-else-if="scope.row.serviceState == 1" class="color-green">已完成</p>
                </template>
              </el-table-column>
              <el-table-column label="兑付状态">
                <template slot-scope="scope">
                  <p v-if="scope.row.state == 1" class="color-backcolor">待审核</p>
                  <p v-else-if="scope.row.state == 2" class="color-green">审核通过</p>
                  <p v-else-if="scope.row.state == 3" class="color-red">退回修改</p>
                  <p v-else-if="scope.row.state == 4" class="color-red">审核不通过</p>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="180">
                <template slot-scope="scope">
                  <el-button type="text" @click="reviewItem( scope.row)">查看</el-button>
                  <el-button v-if="scope.row.state == 1" type="text" class="ml10"
                             @click="$router.push('/couponExchangeInfo')">审核
                  </el-button>
                  <el-button v-if="scope.row.state == 2 || scope.row.state == 3" type="text" class="ml10">修改</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
    </template>
  </MenuLayout>
</template>
<script>
import MenuLayout from '@/components/MenuLayout'

export default {
  data() {
    return {
      filterData: {},
      activeIndex: '1',
      // state: 0待申请、1待审核、2审核通过、3退回修改、4审核不通过
      tableData: [
        {
          no: 'FWQ212526',
          name: '小微企业智慧产销管理系统',
          type: 1,
          department: '广西交科集团有限公司',
          date: "2024-08-25 09:24:00",
          price: 20000,
          bidPrice: 6000,
          state: 1,
          serviceState: 1
        },
        {
          no: 'FWQ223623',
          name: '计算机软件著作登记服务',
          type: 1,
          department: '广西交科集团有限公司',
          date: "2024-08-25 09:24:00",
          price: 700,
          bidPrice: 630,
          state: 1,
          serviceState: 1
        },
        {
          no: 'FWQ223624',
          name: '企业产品系列之企达分销DRP标准版',
          type: 1,
          department: '广西交科集团有限公司',
          date: "2024-08-25 09:24:00",
          price: 3600,
          bidPrice: 1800,
          state: 4,
          serviceState: 1
        },
      ]
    }
  },
  components: {
    MenuLayout
  },
  created() {
  },
  methods: {
    handleSelect() {
    },
    // 查看
    reviewItem() {
      this.$router.push('/couponExchangeInfo')
    },
  }
}
</script>

<style scoped>
/*修改elementiUI菜单底部边框的颜色*/
:deep .el-menu--horizontal > .el-menu-item.is-active {
  border-bottom-color: #D32521;
}

:deep .el-table thead {
  color: #000;
}
</style>
